<template>
	<view class="fullscreen-page">
		<view class="fullscreen-header" :style="{ paddingTop: safeDistance + 'px' }">
			<view class="header-left">
				<view class="back-btn" @click="goBack">
					<text class="back-icon">←</text>
				</view>
				<view class="fullscreen-title" >
					<text class="fullscreen-icon">💻</text>
					<text class="fullscreen-label">代码示例</text>
				</view>
			</view>
		</view>
		<scroll-view class="fullscreen-scroll" scroll-x scroll-y :show-scrollbar="true">
			<view class="fullscreen-code-block">
				<rich-text class="fullscreen-code-text" :nodes="highlightCode(codeContent, techCode)"></rich-text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { getThemeStyles } from '@/stores/theme';
	import { highlightCode } from '@/utils/code-highlight';
	
	// ============================================
	// 响应式状态
	// ============================================
	
	/**
	 * 代码内容
	 */
	const codeContent = ref('');

	/**
	 * 技术栈代码
	 */
	const techCode = ref('java');

	// ============================================
	// 计算属性
	// ============================================

	/**
	 * 主题样式（响应式）
	 */
	const themeStyles = computed(() => getThemeStyles());

	/**
	 * 安全距离（顶部内边距 = 安全区域 + 基础间距）
	 */
	const safeDistance = computed(() => (uni.getSystemInfoSync().safeAreaInsets?.top || 0) + 20);

	// ============================================
	// 生命周期
	// ============================================

	onLoad(() => {
		// 从本地存储获取代码内容和技术栈代码
		const storedCode = uni.getStorageSync('fullscreenCode');
		const storedTechCode = uni.getStorageSync('fullscreenTechCode');
		
		if (storedCode) {
			codeContent.value = storedCode;
		}
		if (storedTechCode) {
			techCode.value = storedTechCode;
		}
	});

	// ============================================
	// 方法
	// ============================================

	/**
	 * 返回上一页
	 */
	const goBack = () => {
		uni.navigateBack();
	};
</script>

<style lang="scss" scoped>
	.fullscreen-page {
		width: 100vw;
		height: 100vh;
		background: #1a202c;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.fullscreen-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 32rpx;
		background: #2d3748;
		border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
		flex-shrink: 0;
	}

	.header-left {
		display: flex;
		align-items: center;
		gap: 24rpx;
	}

	.back-btn {
		width: 56rpx;
		height: 56rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		cursor: pointer;
		transition: all 0.3s ease;

		&:hover {
			background: rgba(255, 255, 255, 0.15);
			transform: translateX(-4rpx);
		}

		&:active {
			transform: translateX(0) scale(0.95);
		}
	}

	.back-icon {
		font-size: 32rpx;
		color: #e2e8f0;
		font-weight: 700;
	}

	.fullscreen-title {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.fullscreen-icon {
		font-size: 40rpx;
	}

	.fullscreen-label {
		font-size: 32rpx;
		font-weight: 700;
		color: #e2e8f0;
		letter-spacing: 0.5rpx;
	}

	.fullscreen-scroll {
		flex: 1;
		width: 100%;
		background: #2d3748;
		overflow-x: auto;
		overflow-y: auto;

		&::-webkit-scrollbar {
			height: 12rpx;
			width: 12rpx;
		}

		&::-webkit-scrollbar-track {
			background: rgba(255, 255, 255, 0.05);
			border-radius: 6rpx;
		}

		&::-webkit-scrollbar-thumb {
			background: rgba(255, 255, 255, 0.2);
			border-radius: 6rpx;

			&:hover {
				background: rgba(255, 255, 255, 0.3);
			}
		}
	}

	.fullscreen-code-block {
		padding: 40rpx;
		position: relative;
		display: inline-block;
		min-width: 100%;
		box-sizing: border-box;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 8rpx;
			height: 100%;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		}
	}

	.fullscreen-code-text {
		font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
		font-size: 28rpx;
		color: #f7fafc;
		line-height: 2;
		white-space: pre;
		word-break: keep-all;
		overflow-wrap: normal;
		padding-left: 24rpx;
		font-weight: 500;
		display: inline-block;
		min-width: max-content;
	}
</style>
